<template>
	<view>
		<picker mode=multiSelector :range="range" range-key="val" @change="bindChange" @columnchange="columnchange"
			:value="selected_index">
			<view class="row">
				<view class="col-auto mr-10 t-row-1" :class=" region_name ? '' : 'c-bbb'">
					{{ region_name || placeholder }}</view>
				<view class="iconfont icon-unfold"></view>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		name: "gt-select-region",
		props: {
			placeholder: {
				type: String,
				default: '请选择'
			},
			inputClass: {
				type: String,
				default: ''
			},
			inputStyle: {
				type: String,
				default: ''
			},
			province: {
				type: [String, Number],
				default: ''
			},
			city: {
				type: [String, Number],
				default: ''
			},
			county: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				region_name: '',
				selected_index: ['', '', ''],
				range: [
					[],
					[],
					[]
				],
				region_drop_list: []
			}
		},
		computed: {
		},
		created() {
			this.getRegion();
		},
		watch: {},
		methods: {
			init(){
				let _this = this;
				let province = [{
					key: 0,
					val: '选择省'
				}];
				let city = [{
					key: 0,
					val: '选择市'
				}];
				let county = [{
					key: 0,
					val: '选择区'
				}];
				for (let index in this.region_drop_list) {
					let row = this.region_drop_list[index];
					if (row.class_type == 1) {
						province.push({
							key: row.class_id,
							val: row.class_name
						});
					}
					if(row.class_parent_id == this.province){
						city.push({
							key: row.class_id,
							val: row.class_name
						});
					}
					if(row.class_parent_id == this.city){
						county.push({
							key: row.class_id,
							val: row.class_name
						});
					}
				}
				this.range = [province, city, county];
				this.changeSelectedIndex();
			},
			getRegion() {
				let _this = this;
				if(this.$var.region){
					this.region_drop_list = this.$var.region;
					this.init();
				}else{
					this.$get({
						url: '/common/sys-region/drop-list',
						fun(r) {
							_this.$var.region = r;
							_this.region_drop_list = r;
							_this.init();
						}
					});
				}
				
			},
			columnchange(e) {
				let index = e.detail.value;
				if (e.detail.column == 0) {
					let parent_key = this.range[0][index].key
					this.rangeChange('province', parent_key);
				} else if (e.detail.column == 1) {
					let parent_key = this.range[1][index].key
					this.rangeChange('city', parent_key);
				}
			},
			bindChange(e) {
				this.selected_index = e.detail.value;
				let province_name = this.selected_index[0] == 0 ? '' : this.range[0][this.selected_index[0]].val;
				let city_name = this.selected_index[1] == 0 ? '' : ' / ' + this.range[1][this.selected_index[1]].val;
				let county_name = this.selected_index[2] == 0 ? '' : ' / ' + this.range[2][this.selected_index[2]].val;
				this.$emit('update:province', this.selected_index[0] == 0 ? '' : this.range[0][this.selected_index[0]]
				.key);
				this.$emit('update:city', this.selected_index[1] == 0 ? '' : this.range[1][this.selected_index[1]].key);
				this.$emit('update:county', this.selected_index[2] == 0 ? '' : this.range[2][this.selected_index[2]].key);
				this.region_name = province_name + city_name + county_name;
				let region_name = {
					province_name:this.selected_index[0] == 0 ? '' :this.range[0][this.selected_index[0]].val,
					city_name:this.selected_index[1] == 0 ? '' :this.range[1][this.selected_index[1]].val,
					county_name:this.selected_index[2] == 0 ? '' :this.range[2][this.selected_index[2]].val
				}
				this.$emit('change',region_name);
			},
			rangeChange(type, parent_key) {
				let city = [{
					key: 0,
					val: '选择市'
				}];
				let county = [{
					key: 0,
					val: '选择区'
				}];
				for (let index in this.region_drop_list) {
					let row = this.region_drop_list[index];
					//市
					if (type == 'province' && parent_key == row.class_parent_id) {
						city.push({
							key: row.class_id,
							val: row.class_name
						});
					}
					// 区
					if (type == 'city' && parent_key == row.class_parent_id) {
						county.push({
							key: row.class_id,
							val: row.class_name
						});
					}
				}
				if (type == 'province') {
					this.range[1] = city;
					this.range[2] = [];
				} else if(type == 'city') {
					this.range[2] = county;
				}
			},
			changeSelectedIndex(){
				for(let i in this.range[0]){
					let row = this.range[0][i];
					if(row.key == this.province){
						this.selected_index[0] = i;
						this.region_name = row.key !== 0 ? row.val : '';
					}
				}
				for(let i in this.range[1]){
					let row = this.range[1][i];
					if(row.key == this.city){
						this.selected_index[1] = i;
						this.region_name += row.key !== 0 ? ' / ' + row.val : '';
					}
				}
				for(let i in this.range[2]){
					let row = this.range[2][i];
					if(row.key == this.county){
						this.selected_index[2] = i;
						this.region_name += row.key !== 0 ? ' / ' + row.val : '';
					}
				}
			}
		}
	}
</script>

<style>
	.gt-select-region:hover {
		cursor: pointer;
	}

	.picker-view {
		width: 100%;
		height: 300px;
		margin-top: 20px;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>
